<template>
  <div class="app-container">
    <hd-table-page ref="hdTable" :columns="columns" modulePath="attendance/record/clock" style="height: calc(100% - 120px)" readOnly>
      <template #query-deptId="{ data, field }">
        <dept-select v-model="data[field.prop]" />
      </template>
      <template #actionButton="{ tableData, tableDataChild }">
        <el-button type="primary" icon="el-icon-search" size="mini" @click="resetClockRecord()" v-hasPermi="['attendance:record:reset']">
          重载考勤记录
        </el-button>
      </template>
      <template #beginClockDesc="{ row }">
        <dict-tag :options="status" :value="row.beginClockDesc"></dict-tag>
        <el-tooltip v-if="row.beginAddress" class="item" effect="dark" :content="row.beginAddress" placement="right">
          <a href="#" style="text-decoration: underline">(外勤打卡)</a>
        </el-tooltip>
      </template>
      <template #endClockDesc="{ row }">
        <dict-tag :options="status" :value="row.endClockDesc"></dict-tag>
        <el-tooltip v-if="row.endAddress" class="item" effect="dark" :content="row.endAddress" placement="right">
          <a href="#" style="text-decoration: underline">(外勤打卡)</a>
        </el-tooltip>
      </template>
    </hd-table-page>
  </div>
</template>

<script>
//考勤记录
import baseService from '@/api/attendance/record'
// const baseService = new RecordService('attendance/record/clock')
export default {
  name: 'RecordAttendance',
  data() {
    return {
      status: [
        {
          dictLabel: '正常',
          dictValue: '1',
        },
        {
          dictLabel: '迟到',
          dictValue: '2',
        },
        {
          dictLabel: '早退',
          dictValue: '3',
        },
        {
          dictLabel: '未打卡',
          dictValue: '4',
        },
      ],
      // 导出遮罩层
      columns: [
        { type: 'index', label: '#', align: 'center' },
        { prop: 'personName', label: '姓名', required: true },
        { prop: 'deptId', label: '部门', minWidth: '150px', required: true, isColumn: false },
        { prop: 'deptName', label: '部门', minWidth: '120px', isField: false, isSearch: false },
        {
          prop: 'shiftDesc',
          label: '班次',
          minWidth: '150px',
          required: true,
          isSearch: false,
        },
        {
          prop: 'shiftDate',
          label: '日期',
          minWidth: '120px',
          isSearch: false,
          formatter: (row, column, cellValue, index) => {
            return this.$moment(cellValue).format('YYYY-MM-DD dddd')
          },
        },
        {
          prop: 'beginTimeClock',
          label: '上班打卡时间',
          minWidth: '150px',
          isSearch: false,
        },
        {
          prop: 'beginClockDesc',
          label: '上班打卡结果',
          minWidth: '150px',
          isSearch: false,
          // formatter: (row, column, cellValue, index) => {
          //   return this.getDictLabel(cellValue, this.status)
          // },
        },
        { prop: 'endTimeClock', label: '下班打卡时间', minWidth: '150px', isSearch: false },
        {
          prop: 'endClockDesc',
          label: '下班打卡结果',
          minWidth: '150px',
          isSearch: false,
          // formatter: (row, column, cellValue, index) => {
          //   return this.getDictLabel(cellValue, this.status)
          // },
        },
      ],
    }
  },
  methods: {
    resetClockRecord() {
      baseService.resetClockRecord()
    },
  },
}
</script>

<style lang="scss" scoped></style>
